/**
 * 两列容器，左侧为列表，右侧为内容详情
 */

import { Select } from 'antd';
import { useMemo, useState } from 'react';
import './index.less';

type ToolsT = 'search';

interface IProps {
  list: any[];
  /** 列表项目标题filed名称 */
  titleKey?: string;
  /** 列表项目子标题/描述项目filed名称 */
  subTitleKey?: string;
  listRender?: (item: any) => JSX.Element;
  activeKey: string;
  keyField: string;
  content: JSX.Element;
  onSelect: (key: string) => void;
  tools?: ToolsT[];
  searchKey?: string; // 搜索时比较的item字段
  onSearch?: (key: string) => void; //
  sorter?: (a: any, b: any) => number;
}

function ContentList(props: IProps) {
  const {
    list,
    content,
    activeKey,
    titleKey = 'title',
    subTitleKey = 'desc',
    onSelect,
    onSearch,
    keyField = 'key',
    searchKey,
    listRender,
    tools = [],
    sorter,
  } = props;

  const [toolsActive, setToolsActive] = useState(false);

  const sortedList = useMemo(() => {
    if (sorter) {
      return [...list].sort(sorter);
    } else {
      return list;
    }
  }, [list, sorter]);

  return (
    <div className="cl__container">
      <div className="cl__list">
        {tools.length > 0 && (
          <div className="cl__tools">
            <div
              className="cl__tools-content"
              style={{ height: toolsActive ? '40px' : 0 }}
            >
              {tools.includes('search') && searchKey && (
                <Select
                  className="cl__tools-search"
                  showSearch
                  placeholder="搜索"
                  optionFilterProp="children"
                  onChange={(v) => {
                    onSearch?.(v);
                  }}
                  onSearch={(v) => {
                    onSearch?.(v);
                  }}
                  allowClear
                  size="small"
                >
                  {list.map((i) => (
                    <Select.Option value={i?.[searchKey]} key={i?.[searchKey]}>
                      {i?.[searchKey] || '搜索配置异常'}
                    </Select.Option>
                  ))}
                </Select>
              )}
            </div>
            <div
              className={[
                'cl__tools-handler',
                toolsActive ? 'cl__tools-handler--active' : '',
              ].join(' ')}
              onClick={() => setToolsActive(!toolsActive)}
            >
              <i></i>
            </div>
          </div>
        )}
        <ul>
          {sortedList.map((i, index) => (
            <li
              key={index}
              className={[
                'cl__list-item',
                activeKey === i[keyField] ? 'cl__list-item--active' : '',
              ].join(' ')}
              onClick={() => onSelect(i[keyField])}
            >
              {listRender ? (
                listRender(i)
              ) : (
                <>
                  <span className="cl__list-item__title">{i?.[titleKey]}</span>
                  {i.desc && (
                    <span className="cl__list-item__desc">
                      {i?.[subTitleKey]}
                    </span>
                  )}
                </>
              )}
            </li>
          ))}
        </ul>
      </div>
      <div className="cl__content">{content}</div>
    </div>
  );
}

export default ContentList;
